<template>
    <el-container>
        <el-aside width="200px">
            <SideBar />
        </el-aside>
        <el-container>
            <el-header>
                <NavBar />
            </el-header>
            <el-main>
                <div class="mainContainer">
                    <!-- <el-card> -->
                    <slot name="main"></slot>
                    <!-- </el-card> -->

                </div>
            </el-main>
            <!-- <el-footer>Footer</el-footer> -->
        </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import NavBar from '@/components/NavBar.vue';
import SideBar from '../components/SideBar.vue';
</script>

<style lang="scss" scoped>
.el-container {
    min-width: auto;
}

.el-aside {
    background-color: $bg-deep-grey;
    color: $border-white;
    text-align: center;
    // line-height: 200px;
    // min-height: 100vh;
}

.el-header {
    position: fixed;
    top: 0;
    min-width: calc(100vw - 200px);
    background-color: $bg-white;
    z-index: 100;
}

.el-main {
    background-color: $bg-grey;
    color: $text-black;
    line-height: 160px;
    margin-top: 60px;
    height: calc(100vh - 60px);

    // .el-card {
    //     height: calc(100% - 40px);
    //     overflow: auto;

    //     .el-card_body {
    //         height: 100%;
    //     }
    // }
}

.mainContainer {
    border-radius: 8px;
    border: 1px solid $border-white;
    background-color: $bg-white;
    min-height: calc(100% - 40px);
    // overflow: auto;
}
</style>